<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form layui-form-pane">

        <div class="layui-form-item">
            <label class="layui-form-label required">选择店铺</label>
            <div class="layui-input-block layuimini-upload">
                <div id="myXmSelect" class="xm-select-demo"></div>
            </div>
        </div>
        

        <div class="layui-form-item layui-hide" id="mytable">
            <label class="layui-form-label required">互通设置</label>
            <div class="layui-input-block">
                <table class="layui-hide" id="showTable" lay-filter="showTable"></table>
                <tip style="color:red;">*互通勾选</tip>
            </div>

        </div>
        <textarea name="info" class="layui-textarea layui-hide" id="checkData"></textarea>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-block">
                <textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
            </div>
        </div>

        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>

    </form>
</div>
{js href="__STATIC__/common/js/com.js" /}
<script type="text/javascript">
    
    layui.config({
        base: '/static/plugs/layui-v2.5.6/lay/modules/',
    }).use(['inputTags','jquery','layselect','table'],function(){
        var $ = layui.jquery;
        var table = layui.table;
        var myXmSelect = xmSelect.render({
            el: '#myXmSelect', 
            //监听方法
            on: function (data) {
                var arr = data.arr;
                console.log('arr',arr);
                var baseInfo = [];
                var crack = [];
                var storeName = [];
                if (arr.length > 0) {
                    
                    $('#mytable').removeClass("layui-hide");
                }else{
                    $('#mytable').addClass("layui-hide");
                }
                for(i = 0;i<arr.length;i++){
                    baseInfo.push(arr[i].store_id+','+arr[i].store_name);
                }
                
                crack = cmn(baseInfo,2);
                var arrange = [];
                if(crack){
                    crack.forEach(function(v,k){
                        var str = ""; 
                        var strArr = [];
                        for(var i = 0; i < v.length; i++){
                            /*v[i].split("{|}");*/
                            str += v[i]+',';
                        }   
                        strArr = str.split(",");
                        arrange.push({'source':strArr[0],'source_name':strArr[1],'goal':strArr[2],'goal_name':strArr[3]})
                    }); 
                }
               
                table.render({
                    elem: '#showTable'
                    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    ,pageSize:1000
                    ,cols: [[
                      {type:'checkbox'}
                      ,{field:'source', title: 'store_id','hide':true}
                      ,{field:'source_name', title: '店铺名称'}
                      ,{field:'goal', title: 'store_id','hide':true}
                      ,{field:'goal_name', title: '店铺名称'}
                      
                    ]],
                    data:arrange
                });
                
            },
            //开启搜索
            filterable: true,
            //搜索提示
            searchTips: '请输入店铺名称关键词',
            //开启远程搜索
            remoteSearch: true,
            paging: true,
            pageSize: 2,//每页条数
            // layVerify: 'required',
            //搜素延迟
            delay: 1000,
            //下拉方向
            direction: 'down',
            prop: {
                name: 'store_name',
                value: 'store_id',
            },
            //搜索回调
            remoteMethod: function (val, cb, show, pageIndex) {

                $.ajax('/admin/Common/getStore', {
                    method: 'get',
                    data: {
                        store_name: val,
                        page: pageIndex
                    },
                    
                    dataType: 'json',
                    success: function (res) {
                        console.log(222,res);
                        var TotalCount = res.count;
                        var Pages = Math.ceil(TotalCount / 10);
                        var res = res.data;
                        setTimeout(function () {
                            //需要回传一个数组
                            cb(res, Pages)
                        }, 100)
                    }
                })
            },
            paging: true,
            pageRemote: true,
            checkbox: true,
            clickClose: false,
        })

        //获取表格选中的数据
        table.on('checkbox(showTable)', function(obj){
            var checkStatus = table.checkStatus('showTable');
            var data = checkStatus.data;
            $('#checkData').val(JSON.stringify(data));
        });

    })  

    
     

  

</script>